<template>
  <div class="proportion-wrap">
    <div class="top-wrap">
      <p>
        <i class="el-icon-user-solid"></i>
        用户画像
      </p>
      <div>
        <el-button type="primary" icon="el-icon-refresh" @click='getLoadUserStatistics'>刷新</el-button>
      </div>
    </div>

    <div class="sex-wrap">
      <div class="sex-box">
        <div id="sex-echarts" ref="sex-echarts"></div>
      </div>
    </div>
    <div class="age-wrap">
      <p>年龄比例</p>
      <div class="age-box">
        <div class="age-data">
          <div id="age-echarts" ref="age-echarts"></div>
        </div>
        <div class="age-table">
          <table>
            <tr>
              <td>年龄</td>
              <td>占比</td>
              <td>人数</td>
            </tr>
            <tr>
              <td>18-23</td>
              <td>{{ageTable.stageby1}}%</td>
              <td>{{ageList.stage1}}</td>
            </tr>
            <tr>
              <td>24-29</td>
              <td>{{ageTable.stageby2}}%</td>
              <td>{{ageList.stage2}}</td>
            </tr>
            <tr>
              <td>30-39</td>
              <td>{{ageTable.stageby3}}%</td>
              <td>{{ageList.stage3}}</td>
            </tr>
            <tr>
              <td>40-49</td>
              <td>{{ageTable.stageby4}}%</td>
              <td>{{ageList.stage4}}</td>
            </tr>
            <tr>
              <td>50+</td>
              <td>{{ageTable.stageby5}}%</td>
              <td>{{ageList.stage5}}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import "../../../node_modules/echarts/map/js/china.js";
import { loadUserStatistics } from "@/request/api";
import { Loading } from 'element-ui';
export default {
  data() {
    return {
      charts: "",
      mapChart: "",
      sexCharts: "",
      peopleNum: "",
      ageList: "",
      ageTable: "",
      mapList: "",
      loading: false,
      options:{},
    };
  },
  mounted() { 
    
  },
  methods: {
    getLoadUserStatistics() {
      let loadingInstance = Loading.service(this.options);
      loadUserStatistics().then(res => {
        this.peopleNum = res.data.data;
        this.ageList = this.peopleNum.ageList[0].agemap;
        this.ageTable = this.peopleNum.ageList[0].ageByPercentage;
        this.mapList = this.peopleNum.regionByList
        this.draw();
        this.sexEcharts();
        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
          loadingInstance.close();
        });
      });
    },
    draw() {
      // 实例化echarts对象
      var pieId = document.getElementById("age-echarts");
      if (!pieId) {
        return false;
      }
      //var pie = echarts.init(pieId);
      this.charts = echarts.init(document.getElementById("age-echarts"));
      //this.charts = echarts.init(this.$refs.age-echarts);
      // 绘制条形图
      let option = {
        title: {
          /*text: '地区点位、设备核对进度',*/
          top: 5,
          left: "center"
        },
        legend: {
          data: ["衣服" /*, '帽子'*/],
          top: 30
        },
        // X轴
        xAxis: {
          data: ["18-23", "24-29", "30-39", "40-49", "50+"]
        },
        // Y轴
        yAxis: {},
        // 数据
        series: [
          {
            /*name: '衣服',*/
            type: "bar",
            color: "#66b1ff",
            data: [
              this.ageList.stage1,
              this.ageList.stage2,
              this.ageList.stage3,
              this.ageList.stage4,
              this.ageList.stage5
            ],
            //data:this.peopleNum.ageList[0].agemap,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#222",
                    fontSize: 14
                  }
                }
              }
            }
          }
        ]
      };
      this.charts.setOption(option);
    },
    sexEcharts() {
      this.sexCharts = echarts.init(document.getElementById("sex-echarts"));
      var data = [
        {
          name: "男性",
          value: this.peopleNum.sexCosnamelist[0].male
        },
        {
          name: "女性",
          value: this.peopleNum.sexCosnamelist[0].female
        },
        {
          name: "ios",
          value: this.peopleNum.sexCosnamelist[0].ios
        },
        {
          name: "安卓",
          value: this.peopleNum.sexCosnamelist[0].android
        }
      ];

      var titleArr = [],
        seriesArr = [],
        colors = [
          ["#389af4", "#dfeaff"],
          ["#fd6f97", "#fed4e0"],
          ["#ff8c37", "#ffdcc3"],
          ["#a181fc", "#e3d9fe"]
        ];
      data.forEach(function(item, index) {
        titleArr.push({
          text: item.name,
          left: index * 20 + 10 + "%",
          //top: '65%',
          textAlign: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: "16",
            color: colors[index][0],
            textAlign: "center"
          }
        });
        seriesArr.push({
          name: item.name,
          type: "pie",
          clockWise: false,
          radius: [60, 70],
          itemStyle: {
            normal: {
              color: colors[index][0],
              shadowColor: colors[index][0],
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          center: [index * 20 + 10 + "%", "50%"],
          data: [
            {
              value: item.value,
              label: {
                normal: {
                  formatter: function(params) {
                    return params.value + "%";
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "20",
                    fontWeight: "bold",
                    color: colors[index][0]
                  }
                }
              }
            },
            {
              value: 100 - item.value,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }
          ]
        });
      });

      let option = {
        backgroundColor: "#fff",
        title: titleArr,
        series: seriesArr
      };
      this.sexCharts.setOption(option);
    },
  },
  created() {
    this.$nextTick(()=>{
      this.getLoadUserStatistics();
    })
  }
};
</script>

<style lang="scss" scoped>
.proportion-wrap {
  .top-wrap {
    width: 97.8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
  }

  .sex-wrap {
    .sex-box {
      background-color: #fff;
      border-radius: 5px;
    }

    #sex-echarts {
      width: 1000px;
      height: 300px;
      margin: 0 auto;
      padding-top: 40px;
    }

    .title-wrap {
      display: flex;
      position: relative;
      left: 1300px;
      bottom: 20px;

      .man-wrap {
        display: flex;
        align-items: center;

        span {
          display: block;
          width: 20px;
          height: 20px;
          background-color: #509afd;
        }
      }

      .woman-wrap {
        display: flex;
        margin: 0 30px;
        align-items: center;

        span {
          display: block;
          width: 20px;
          height: 20px;
          background-color: #fc5249;
        }
      }
    }
  }

  .age-wrap {
    p {
      padding: 10px 30px;
    }

    .age-box {
      background-color: #fff;
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .age-data {
        #age-echarts {
          width: 600px;
          height: 400px;
        }
      }

      .age-table {
        width: 400px;
      }
    }
  }

  .map-wrap {
    p {
      padding: 10px 30px;
    }

    .map-box {
      height: 700px;
      background-color: #fff;
      border-radius: 5px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .map-data {
        #map-echarts {
          width: 1000px;
          height: 400px;
        }
      }

      .map-table {
        width: 400px;
      }
    }
  }
}

.el-table__row {
  height: 80px;
}
</style>
